<template>
    <nut-uploader url="/api/User/upload" :headers="headers" @success="handleSuccess">
        <div class="upload">
            <template v-if="!url">
                <img v-if="props.type === 'image'" src="@/assets/upload-picture-icon.webp" alt="">
                <img v-if="props.type === 'video'" src="@/assets/upload-video-icon.webp" alt="">
                <span>上传{{ props.type === 'image' ? '图片' : '视频' }}</span>
            </template>
            <template v-else>
                <img v-if="props.type === 'image'" :src="url" alt="" class="!w-full !h-full">
                <video v-if="props.type === 'video'" :src="url" alt="" class="!w-full !h-full"></video>
            </template>
        </div>
        <slot name="hint"></slot>
    </nut-uploader>
</template>

<script setup lang="ts">
import siStore from 'si-store'
import { ref } from 'vue'

const props = defineProps({
    type: {
        type: String,
        default: 'image'
    }
})

const headers = {
    Authorization: `Bearer ${siStore.get('tokenData')?.access_token}`
}
const file = defineModel<any>('file')

const url = ref('')
const handleSuccess = ({ responseText, fileItem }) => {
    const res = JSON.parse(responseText)
    console.log(' res -->', res.data)
    console.log(' fileItem -->', fileItem)
    url.value = fileItem.url
    if (res.data.length === 1) {
        file.value = res.data[0].id
    } else {
        file.value = res.data.map(item => item.id)
    }
}
</script>

<style scoped lang="scss">
.upload {
    width: 77px;
    height: 77px;
    border-radius: 5px;
    background: #1f1f1f;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    color: #fff;
    line-height: 1;
    gap: 10px;
    overflow: hidden;

    img {
        width: 19px;
    }
}

.upload-hint {
    position: absolute;
    left: calc(100% + 18px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    line-height: 16px;
    color: #c9c9c9;
    width: fit-content;
    white-space: nowrap;
    text-align: center;
}
</style>
